<template>
  <text>{{ displayText }}</text>
</template>

<script setup>
import {computed} from 'vue'

const props = defineProps({
  value: {
    type: [String, Number],
    required: true
  },
  options: {
    type: Array,
    required: true,
    validator: (value) => {
      return value.every(opt => 'value' in opt && 'text' in opt)
    }
  }
})

const displayText = computed(() => {
  if (!props.options || props.options.length === 0) {
    return props.value
  }
  let options = props.options;
  const option = options?.find(opt => opt.value === props.value)
  return option ? option.text : props.value
})
</script>

<style scoped>
</style>